<template>
  <div class="quote-message">
    <div class="quote-container">
      <div class="quote-header">
        <span class="quote-avatar">
          <img :src="message.quotedSenderAvatar || defaultAvatar" />
        </span>
        <span class="quote-sender">{{ message.quotedSenderNickname || "未知用户" }}</span>
      </div>
      <div class="quote-content">
        <template v-if="message.quotedMessageType === MESSAGE_TYPE.TEXT">
          {{ message.quotedMessageSummary }}
        </template>
        <template v-else-if="message.quotedMessageType === MESSAGE_TYPE.IMAGE">
          <i class="el-icon-picture"></i> [图片]
        </template>
        <template v-else-if="message.quotedMessageType === MESSAGE_TYPE.VOICE_MSG">
          <i class="el-icon-microphone"></i> [语音]
        </template>
        <template v-else-if="message.quotedMessageType === MESSAGE_TYPE.FILE">
          <i class="el-icon-document"></i> [文件]
        </template>
        <template v-else-if="message.quotedMessageType === MESSAGE_TYPE.APP_LINK">
          <i class="el-icon-link"></i> [链接]
        </template>
        <template v-else>
          {{ message.quotedMessageSummary || "[消息]" }}
        </template>
      </div>
    </div>
    
    <!-- 引用消息的实际内容 -->
    <div class="quoted-actual-content">
      <div v-html="sanitizeHtml(message.content)"></div>
    </div>
  </div>
</template>

<script>
import sanitizeHtml from "@/utils/sanitize";

export default {
  name: 'QuoteMessageComponent',
  props: {
    message: {
      type: Object,
      required: true
    },
    defaultAvatar: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      MESSAGE_TYPE: {
        TEXT: 0,
        IMAGE: 1,
        FILE: 2,
        VOICE_MSG: 6,
        APP_LINK: 10
      }
    };
  },
  methods: {
    sanitizeHtml
  }
}
</script>

<style scoped>
.quote-message {
  display: inline-block;
  max-width: 100%;
}

.quote-container {
  background: #f5f5f5;
  border-left: 3px solid #409eff;
  padding: 8px 12px;
  margin-bottom: 8px;
  border-radius: 0 4px 4px 0;
}

.quote-header {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.quote-avatar {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  flex-shrink: 0;
}

.quote-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.quote-sender {
  font-size: 12px;
  color: #666;
  font-weight: 500;
}

.quote-content {
  font-size: 13px;
  color: #333;
  line-height: 1.4;
  word-wrap: break-word;
  word-break: break-all;
}

.quote-content i {
  margin-right: 4px;
  color: #999;
}

.quoted-actual-content {
  word-wrap: break-word;
  word-break: break-all;
  white-space: pre-wrap;
}
</style>
